473,441 Members | 1,640 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,441 software developers and data experts.

Rollover images without flash

I found this site:

http://k10k.net/

Notice how the top menu has rollover images without flash. How is this done?

Thanks.
Feb 28 '08 #1
6 1653
Logician
210 100+
I found this site:

http://k10k.net/

Notice how the top menu has rollover images without flash. How is this done?.
Rollover images without flash are commonplace. The particular visual effect is probably just an animated .gif
Feb 28 '08 #2
Rollover images without flash are commonplace. The particular visual effect is probably just an animated .gif
If you look closely, it uses javascript. I just want to know how it's done. (it's clearly not an animated .gif - http://k10k.net/sections/menu/)
Feb 28 '08 #3
gits
5,390 Expert Mod 4TB
hi ...

i hadn't a deep look at it seems to be a js-fade-in effect that is triggered by a click ... what is not to hard to code :) let me give you an example (just tested in firefox):

[HTML]
<html>
<head>
<style type="text/css">
.base { background: black; color: white; border: 1px black black; }
</style>
<script type="text/javascript">
function fade_in(obj) {
var c = 0;
var o = document.createElement('div');

o.innerHTML = obj.innerHTML;

o.style.background = 'red';
o.style.border = '1px solid white';
o.style.position = 'fixed';
o.style.top = obj.offsetTop;
o.style.left = obj.offsetLeft;
o.style.height = c + 'px';

obj.appendChild(o);

var resize_obj = function() {
c++;

if (c >= obj.offsetHeight - 1) {
window.clearInterval(intv);
}

o.style.height = c + 'px';
};

var intv = window.setInterval(resize_obj, 1);
}
</script>
</head>
<body>
<div onclick="fade_in(this);" class="base">
test
</div>
</body>
</html>
[/HTML]
kind regards
Feb 28 '08 #4
It still does not seem to work. I get a lot of bugs when I try to do that. Any other ideas?
Feb 29 '08 #5
gits
5,390 Expert Mod 4TB
It still does not seem to work. I get a lot of bugs when I try to do that. Any other ideas?
the given example works in FF without any error ... what do you use?

kind regards
Feb 29 '08 #6
Rollovers without flash is a common thing on the net, as someone said earlier. There is the posssibility to accomplish this from CSS. There is a video tutorial on [removed] that might help you.
Jul 3 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Brian Angliss | last post by:
I'm relatively new to scripting in JavaScript, so I'm not too surprised I'm having difficulty scripting up an animation effect for my personal site. What I'm trying to do is the following: When...
4
by: Matt | last post by:
i know more-or-less zero about javascript, but my client wants a rollover and he created this code, which doesn't work. All comments are appreciated. 1. the tag: <td align="center" width="66"...
3
by: JOSEPHINE ALVAREZ | last post by:
I have this code that I want to use to do a rollover. However, because the company I am doing it for is continually changing the text, I want to be able to use dynamic text to change the text on...
1
by: Mike P | last post by:
what is the syntax for adding a rollover button as an image button? I have saved the button as a .swf file and put it as the ImageUrl, but since it isn't an image, do I need to save it as an image...
2
by: eholz1 | last post by:
Hello CSS and StyleSheet members, I have decided to move away from Dreamweaver javascript rollover buttons, in favor of a CSS type rollover button. (hope that is ok). I plan to use PHP to...
4
by: somnamblst | last post by:
I am asking this in javascript and not actionscript because I think the js portion more crucial. I have a viewable area in a SWFcalled box_mc on frame1 that is 300x100 until a rollOver event when it...
3
by: Oriane | last post by:
Hi there, I would like to handle a "rollover" <asp:Buttonin the code behind with C# with this kind of code: Button btn = Page.FindControl("Button" + numWidget) as Button; btn.Attributes =...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.